<template>
<div>
  <div class="table-data">
    <div class="search-box">
      <el-input size="small" v-model="searchData.type" placeholder="分类名称"></el-input>
      <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      <el-button size="small" @click="handleAdd()"><i class="el-icon-plus"></i><span>新建分类</span></el-button>
    </div>
    <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" border style="width:100%" :height="tHeight" class="table-box">
      <el-table-column label="id" prop="id"></el-table-column>
      <el-table-column label="分类名称" prop="advertisersName"></el-table-column>
      <el-table-column label="包含渠道" prop="appid"></el-table-column>
      <el-table-column label="备注" prop="advertisersKey"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
          <el-button size="small" type="primary" @click="handleEdit(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pages" ref="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- <AddDialog :isAdd="isAdd" @closeDialog="closeDialog" @loadData="loadData"></AddDialog> -->
    <EditDialog :isEdit="isEdit" :isAdd="isAdd" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></EditDialog>
  </div>
    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import EditDialog from "./EditDialog.vue";
// import supplierApi from "@/api/supplier.js";
@Component({
  components: {EditDialog }
})
export default class channelKindList extends Vue {
  // @Getter("user") getUser: any;
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() multipleTable: any = []; // 表格数据
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() isEdit: Boolean = false; // 是否展示编辑弹窗
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() advertisers: any = []; 
  @Provide() searchData:{// 查询渠道参数
    id: string,
    market:string,
    channelIds: string,

  }={
    id: "",
    market:"",
    channelIds: "",
  }
  @Provide() formData: any = {
    id:"",
    advertisersName:"",
    advertisersKey: "",
    appid:""
  };
  @Provide() searchMap:{
    name: string,
    phone:string,
  }={
    name:'',
    phone:''
  }
 // 新增
  handleAdd(){
    this.isAdd=true;
    this.isEdit=true;
    this.formData.id =""
    this.formData.advertisersName=""
    this.formData.advertisersKey=""
    this.formData.appid=""
  }
  // 编辑
  handleEdit(index: number, row: any){
    this.isEdit=true;
    this.formData.id =row.id
    this.formData.advertisersName=row.advertisersName
    this.formData.advertisersKey=row.advertisersKey
    this.formData.appid=row.appid
  }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
    this.isEdit = false;
  }

  created() {
    this.loadData();
  }

  loadData() {
    // this.tableData=[
    //   {id:1,userNo:'123456',phone:'1111111'}
    // ]
    // supplierApi.supplierList(this.page,this.size,this.searchMap)
    //   .then((res: any) => {
    //     this.tableData = res.data.data;
    //     this.total = res.data.totalCount;
    //   });
    this.loading=false
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }
  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
    this.page = 1;
    this.loadData();
  }
}
</script>

<style lang="scss" scoped>
.el-range-editor.el-input__inner{
  margin-right: 10px
}
</style>
